<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="-1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Moonlight</title>
  <link rel="stylesheet" href="static/css/roboto.css">
  <link rel="stylesheet" href="static/css/material.min.css">
  <link rel="stylesheet" href="static/css/style.css">
  <link rel="stylesheet" href="static/css/material-icons.css">
  <script type="text/javascript" src="platform.js"></script>
</head>
<body data-name="moonlight-chrome" data-tools="emscripten" data-configs="Debug Release" data-path="{tc}/{config}">
  <div class="mdl-layout mdl-js-layout">
    <header id="main-navigation" class="mdl-layout__header mdl-layout__header--transparent">
      <div class="mdl-layout__header-row">
        <button id="backIcon" class="mdl-button mdl-js-button mdl-button--icon" role="link" aria-label="Host selection">
          <i class="material-icons">keyboard_arrow_left</i>
        </button>
        <!-- Title -->
        <span class="mdl-layout-title">MOON<span>LIGHT</span></span>
        <!-- Add spacer, to align navigation to the right -->
        <div class="mdl-layout-spacer"></div>
        <!-- Navigation -->
        <nav class="mdl-navigation">
          <div class="nav-menu-parent">
            <div id="resolutionMenu">
              <button id="selectResolution" data-value="1920:1080" class="mdl-button mdl-js-button">1080p</button>
            </div>

            <ul class="resolutionMenu mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="selectResolution">
              <li class="mdl-menu__item" data-value="858:480">480p</li>
              <li class="mdl-menu__item" data-value="1280:720">720p</li>
              <li class="mdl-menu__item" data-value="1920:1080">1080p</li>
              <li class="mdl-menu__item" data-value="2560:1440">1440p</li>
              <li class="mdl-menu__item" data-value="3840:2160">4K</li>
            </ul>

            <div id="resolutionTooltip" class="mdl-tooltip" for="resolutionMenu">Resolution</div>
          </div>
          <div class="nav-menu-parent">
            <div id="framerateMenu">
              <button id="selectFramerate" data-value="60" class="mdl-button mdl-js-button">60 FPS</button>
            </div>

            <ul class="framerateMenu mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="selectFramerate">
              <li class="mdl-menu__item" data-value="30">30 FPS</li>
              <li class="mdl-menu__item" data-value="60">60 FPS</li>
            </ul>

            <div id="framerateTooltip" class="mdl-tooltip" for="framerateMenu">Framerate</div>
          </div>

          <div class="nav-menu-parent">
            <div id="bandwidthMenu">
              <button id="bitrateField" class="mdl-button">20 Mbps</button>
            </div>

            <div class="bitrateMenu mdl-menu mdl-js-menu mdl-js-ripple-effect" for="bandwidthMenu">
              <input id="bitrateSlider" class="mdl-slider mdl-js-slider" type="range" min="0" max="100" step="0.5" value="20">
            </div>

            <div id="bandwidthTooltip" class="mdl-tooltip" for="bandwidthMenu">Bandwidth</div>
          </div>

          <div class="nav-menu-parent">
            <div id="codecVideoMenu">
              <button id="selectCodecVideo" data-value=0x0001 class="mdl-button mdl-js-button">H264</button>
            </div>

            <ul class="codecVideoMenu mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="selectCodecVideo">
              <li class="mdl-menu__item" data-value=0x0001>H264</li>
              <li class="mdl-menu__item" data-value=0x0101>HEVC</li>
              <li class="mdl-menu__item" data-value=0x0201>HEVC Main10</li>
              <li class="mdl-menu__item" data-value=0x1201>AV1</li>
              <li class="mdl-menu__item" data-value=0x2201>AV1 Main10</li>


            </ul>
            <div id="codecVideoMenuTooltip" class="mdl-tooltip" for="codecVideoMenu">Video Codec</div>
          </div>

          <div class="nav-menu-parent">
            <label id="externalAudioBtn" class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="remoteAudioEnabledSwitch">
              <input type="checkbox" id="remoteAudioEnabledSwitch" class="mdl-icon-toggle__input">
              <i class="mdl-icon-toggle__label material-icons">volume_up</i>
            </label>
            <div id="externalAudioTooltip" class="mdl-tooltip" for="externalAudioBtn">Play audio on host</div>
          </div>

          <div class="nav-menu-parent">
            <label id="optimizeGamesBtn" class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="optimizeGamesSwitch">
              <input type="checkbox" id="optimizeGamesSwitch" class="mdl-icon-toggle__input">
              <i class="mdl-icon-toggle__label material-icons">timeline</i>
            </label>
            <div id="optimizeGamesTooltip" class="mdl-tooltip" for="optimizeGamesBtn">Allow game optimizations</div>
          </div>

          <div class="nav-menu-parent">
            <label id="framePacingBtn" class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="framePacingSwitch">
              <input type="checkbox" id="framePacingSwitch" class="mdl-icon-toggle__input">
              <i class="mdl-icon-toggle__label material-icons">graphic_eq</i>
            </label>
            <div id="framePacingTooltip" class="mdl-tooltip" for="framePacingBtn">Enable frame pacing</div>
          </div>

          <div class="nav-menu-parent">
            <label id="audioSyncBtn" class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="audioSyncSwitch">
              <input type="checkbox" id="audioSyncSwitch" class="mdl-icon-toggle__input">
              <i class="mdl-icon-toggle__label material-icons">sync</i>
            </label>
            <div id="audioSyncTooltip" class="mdl-tooltip" for="audioSyncBtn">Enable audio syncing</div>
          </div>

          <div class="nav-menu-parent">
            <label id="hdrBtn" class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="hdrSwitch">
              <input type="checkbox" id="hdrSwitch" class="mdl-icon-toggle__input">
              <i class="mdl-icon-toggle__label material-icons">hdr_on</i>
            </label>
            <div id="hdrTooltip" class="mdl-tooltip" for="hdrBtn">Enable HDR</div>
          </div>
		  
          <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="quitCurrentApp" aria-label="Quit current app">
            <i class="material-icons">remove_circle_outline</i>Quit Current App
          </button>
        </nav>
      </div>
    </header>
    <main id="main-content" class="mdl-layout__content">
      <div id="host-grid">
        <div class="add-host-card mdl-card mdl-shadow--4dp" id="addHostCell">
          <div class="mdl-card__title mdl-card--expand" id="addHostIcon" role="link" tabindex="0" aria-label="Add Host">
            <h2 class="mdl-card__title-text">Add Host</h2>
          </div>
        </div>
      </div>
      <div id="game-grid"></div>
      <div id="listener"></div>
      <!-- NaCl module placeholder, NaCl gets thrown into here -->
      <div id="loadingSpinner" class="mdl-progress mdl-js-progress mdl-progress__indeterminate">
        <h5 id="loadingMessage"></h5>
      </div>
      <div id="naclSpinner" class="mdl-progress mdl-js-progress mdl-progress__indeterminate">
        <h5 id="naclSpinnerMessage"></h5>
      </div>
      <div id="modelCodePlaceholder"></div>
    </main>
  </div>
  <script defer src="static/js/jquery-2.2.0.min.js"></script>
  <script defer src="static/js/material.min.js"></script>
  <script type="text/javascript" src="platform/messages.js"></script>
  <script type="text/javascript" src="platform/common.js"></script>
  <script type="text/javascript" src="platform/gamepad.js"></script>
  <script type="text/javascript" src="platform/index.js"></script>
  <script type="text/javascript" src="platform/navigation.js"></script>
  <script type="text/javascript" src="platform/remote_controller.js"></script>
  <script type="text/javascript" src="static/js/utils.js"></script>
  <script type="text/javascript" src="static/js/mdns-browser/dns.js"></script>
  <script type="text/javascript" src="static/js/mdns-browser/main.js"></script>
  <dialog id="pairingDialog" class="mdl-dialog">
    <h3 class="mdl-dialog__title">Pairing</h3>
    <div class="mdl-dialog__content">
      <p id="pairingDialogText">
        Please enter the following PIN on the target PC: XXXX<br><br>
        If your host PC is running Sunshine, navigate to the Sunshine web UI to enter the PIN.<br>
        Alternatively, navigate to the GeForce Experience (NVIDIA GPUs only) to enter the PIN.<br><br>
        This dialog will close once the pairing is complete.
      </p>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="cancelPairingDialog">Cancel</button>
    </div>
  </dialog>
  <dialog id="restartMoonlightDialog" class="mdl-dialog">
    <h3 class="mdl-dialog__title">Restart Moonlight</h3>
    <div class="mdl-dialog__content">
      <p id="restartMoonlightDialogText">
        After changing video codec, you should restart the application
      </p>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="pressOK">OK</button>
    </div>
  </dialog>
  <dialog id="terminateMoonlightDialog" class="mdl-dialog">
    <h3 class="mdl-dialog__title">Exit Moonlight</h3>
    <div class="mdl-dialog__content">
      <p id="terminateMoonlightDialogText">
        Are you sure you want to exit Moonlight?
      </p>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="cancelTerminateMoonlight">Cancel</button>
      <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="exitTerminateMoonlight">Exit</button>
    </div>
  </dialog>
  <dialog id="quitAppDialog" class="mdl-dialog">
    <h3 class="mdl-dialog__title">Quit Running App?</h3>
    <div class="mdl-dialog__content">
      <p id="quitAppDialogText">
        Y is already running. Would you like to quit Y?
      </p>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="cancelQuitApp">No</button>
      <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="continueQuitApp">Yes</button>
    </div>
  </dialog>
  <dialog id="deleteHostDialog" class="mdl-dialog">
    <h3 class="mdl-dialog__title">Delete Host</h3>
    <div class="mdl-dialog__content">
      <p id="deleteHostDialogText">
        Are you sure you want to delete this host?
      </p>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="cancelDeleteHost">No</button>
      <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="continueDeleteHost">Yes</button>
    </div>
  </dialog>
	<dialog id="addHostDialog" class="mdl-dialog">
	  <h3 class="mdl-dialog__title">Add Host Manually</h3>
	  <div class="mdl-dialog__content">
	    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
	    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="manualInputToggle">
		  <input type="checkbox" id="manualInputToggle" class="mdl-checkbox__input" onchange="toggleManualInput()">
		  <span class="mdl-checkbox__label">Enter IP manually (press Select)</span>
		</label>
		<div id="manualInput" style="display: none;">
		  <input type="text" id="manualIPAddress" class="mdl-textfield__input hovered" placeholder="Enter Host IP address">
		</div>
		  <select id="ipPart1" name="ipPart1" style="width: 50px;" tabindex="-1"></select>
		  <select id="ipPart2" name="ipPart2" style="width: 50px;" tabindex="-1"></select>
		  <select id="ipPart3" name="ipPart3" style="width: 50px;" tabindex="-1"></select>
		  <select id="ipPart4" name="ipPart4" style="width: 50px;" tabindex="-1"></select>
		</div>
	  </div>
	  <div class="mdl-dialog__actions">
	    <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="cancelAddHost">Cancel</button>
	    <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="continueAddHost">Continue</button>
	  </div>
	</dialog>
  <dialog id="restartMoonlightDialog" class="mdl-dialog">
    <h3 class="mdl-dialog__title">Restart Moonlight</h3>
    <div class="mdl-dialog__content">
      <p id="restartMoonlightDialogText">
        After changing video codec, you should restart the application
      </p>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="pressOK">OK</button>
    </div>
  </dialog>
  <dialog id="terminateMoonlightDialog" class="mdl-dialog">
    <h3 class="mdl-dialog__title">Exit Moonlight</h3>
    <div class="mdl-dialog__content">
      <p id="terminateMoonlightDialogText">
        Are you sure you want to exit Moonlight?
      </p>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="cancelTerminateMoonlight">Cancel</button>
      <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="exitTerminateMoonlight">Exit</button>
    </div>
  </dialog>
  <div id="snackbar" class="mdl-snackbar mdl-js-snackbar">
    <div class="mdl-snackbar__text"></div>
    <button id="snackButton" class="mdl-snackbar__action" type="button"></button>
    <!-- This button exists to suppress the snackbar warning, we're really using a toast -->
  </div>
  <video id='nacl_module' autoplay tabindex="-1"></video>
  <script>
    const ipParts = [
      { element: 'ipPart1', selectedValue: 192 },
      { element: 'ipPart2', selectedValue: 168 },
      { element: 'ipPart3' },
      { element: 'ipPart4' },
    ];

    ipParts.forEach(ipPart => {
      const element = document.getElementById(ipPart.element);
      populateSelect(element, 0, 255, ipPart.selectedValue);
    });

    function toggleManualInput() {
      const manualInputToggle = document.getElementById('manualInputToggle');
      const manualInputDiv = document.getElementById('manualInput');
      const displayStyle = manualInputToggle.checked ? 'none' : 'inline-block';

      manualInputDiv.style.display = manualInputToggle.checked ? 'block' : 'none';

      ipParts.forEach(ipPart => {
        const element = document.getElementById(ipPart.element);
        element.style.display = displayStyle;
      });
    }

    function populateSelect(element, start, end, selectedValue) {
      for (let i = start; i <= end; i++) {
        const option = document.createElement('option');
        option.value = i;
        option.text = i;
        if (i === selectedValue) {
          option.selected = true;
        }
        element.appendChild(option);
      }
    }
  </script>
</body>
</html>
